@class-prefix-button: ~'adm-button';

.@{class-prefix-button} {
  --color: var(--adm-color-text);

  position: relative;
  display: inline-block;
  box-sizing: border-box;
  height: auto;
  padding: 7px 16px;
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
  border: 1px solid var(--color);
  border-radius: 4px;
  cursor: pointer;
  transition: opacity ease 0.15s;
  user-select: none;
  &:focus {
    outline: none;
  }
  &::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background-color: #000;
    border: inherit;
    border-color: #000;
    border-radius: inherit;
    transform: translate(-50%, -50%);
    opacity: 0;
    content: ' ';
    box-sizing: content-box;
  }
  &:active::before {
    opacity: 0.1;
  }
  &-default {
    color: var(--adm-color-text);
    background-color: var(--adm-color-white);
    border-color: var(--adm-border-color);
    &.@{class-prefix-button}-fill-outline {
      background-color: transparent;
      border-color: var(--adm-color-text);
    }
    &.@{class-prefix-button}-fill-none {
      background-color: transparent;
      border-color: transparent;
    }
  }
  &:not(&-default) {
    color: var(--adm-color-white);
    background-color: var(--color);
    border-color: var(--color);
    &.@{class-prefix-button}-fill-outline {
      color: var(--color);
      background-color: transparent;
    }
    &.@{class-prefix-button}-fill-none {
      color: var(--color);
      background-color: transparent;
      border-color: transparent;
    }
  }
  &-primary {
    --color: var(--adm-color-primary);
  }
  &-success {
    --color: var(--adm-color-success);
  }
  &-danger {
    --color: var(--adm-color-danger);
  }
  &-warning {
    --color: var(--adm-color-warning);
  }

  &-block {
    display: block;
    width: 100%;
  }

  &-disabled {
    cursor: not-allowed;
    opacity: 0.4;
    &:active::before {
      display: none;
    }
  }

  &-mini {
    padding: 3px 7px;
    font-size: 13px;
  }
  &-small {
    padding: 3px 11px;
    font-size: 15px;
  }
  &-large {
    padding: 11px 22px;
    font-size: 18px;
  }
  &-loading {
    vertical-align: bottom;
  }
  &-loading-wrapper {
    display: flex;
    height: 1.4em;
    align-items: center;
    justify-content: center;
    > .adm-loading {
      opacity: 0.6;
    }
  }
}
